<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table{
            width: 700px;
            margin: 100px auto;
            text-align: center;
            font-size: 16px;
            border-collapse: collapse;
        }

        th{
            height: 50px;
            background-color: blueviolet;
        }
        td{
            border-bottom: 1px solid black;
            height: 35px;
        }
        .bw{
            background-color: yellow;
        }
    </style>
</head>
<body>
        <table>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>商品名称</th>
                        <th>价格</th>
                        <th>库存</th>
                        <th>当日出售</th>
                        <th>剩余</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>111</td>
                        <td>西瓜</td>
                        <td>11.5</td>
                        <td>555</td>
                        <td>15</td>
                        <td>333</td>
                    </tr>
                    <tr>
                        <td>222</td>
                        <td>苹果</td>
                        <td>11.5</td>
                        <td>555</td>
                        <td>15</td>
                        <td>333</td>
                    </tr>
                    <tr>
                        <td>333</td>
                        <td>香蕉</td>
                        <td>11.5</td>
                        <td>555</td>
                        <td>15</td>
                        <td>333</td>
                    </tr>
                    <tr>
                        <td>444</td>
                        <td>桃子</td>
                        <td>11.5</td>
                        <td>555</td>
                        <td>15</td>
                        <td>333</td>
                    </tr>
                    <tr>
                        <td>555</td>
                        <td>石榴</td>
                        <td>11.5</td>
                        <td>555</td>
                        <td>15</td>
                        <td>333</td>
                    </tr>
                    <tr>
                        <td>666</td>
                        <td>梨子</td>
                        <td>11.5</td>
                        <td>555</td>
                        <td>15</td>
                        <td>333</td>
                    </tr>
                </tbody>
            </table>


            <script>
                const trs = document.querySelectorAll("tr")
                for(const trss of trs){
                    trss.onmouseover = function(){
                        // console.log("hahha")
                        this.className = 'bw'
                    }
                    trss.onmouseout = function(){
                        // console.log("a")
                        this.className = '';
                    }
                }
            </script>

</body>
</html>